<template>
	<view class="container">
		<view class='image-box'>
			<image src='https://zhongtai.zhongjiaoyuntu.com:9002/dzyx/Images/banner1.png'></image>
		</view>
		<mescroll-uni ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption" @init="mescrollInit" top="420rpx" bottom="20rpx" :safearea="true"
		 >
		 <u-checkbox-group>
			<view class="image-container">
				<view class="image-item" v-for="(item,index) in items" :key="index">
					<image  :lazy-load="true" radius="0rpx" :src="item.url"
						style="margin-bottom: 14rpx;width:100%;height:260px;width:104px;height:146px;border-radius:0px;overflow:visible;box-shadow:2px 2px 5px rgba(0, 0, 0.2, 0.5);;background-color:transparent;"></image>
					<view class="text-wrapper" style="font-size: 26rpx;position:relative;">
						<view style="position:absolute;z-index: 9999;top: -250rpx;left:10rpx;">
							<uv-checkbox class="select_item"
							v-model="item.check"
							@change="changeSel(item)"
								 :name="item.bookName"></uv-checkbox>
						</view>
						<text style="" class="bookName">{{item.bookName}}</text>
					</view>
				</view>
			</view>
			</u-checkbox-group>
		</mescroll-uni>
		<view class="submit">
			<uv-button :custom-style="customStyle" size="large" text="提交" type="primary"
				 @click="openForm"></uv-button>
		</view>
		<view class='formbox' v-if="show">
				<view>
					<view style="text-align:center;font-size:46rpx;color:#999999;font-weight: bold;">基本信息</view>
					<uni-forms ref="form" :modelValue="formData" :rules="rules" class="form">
						<uni-forms-item label="省市区" name="addressName">
							<uni-easyinput type="text" v-model="formData.addressName" placeholder="请输入省市区" />
						</uni-forms-item>
						<uni-forms-item label="详细地址" name="addressDetail">
							<uni-easyinput type="text" v-model="formData.addressDetail" placeholder="请输入地址(具体到市县乡镇村)" />
						</uni-forms-item>
						<uni-forms-item label="联系人" name="linkMan">
							<uni-easyinput type="text" v-model="formData.linkMan" placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item label="联系方式" name="linkPhone">
							<uni-easyinput type="text" v-model="formData.linkPhone" placeholder="请输入联系方式" />
						</uni-forms-item>
					</uni-forms>
					<view class="btn">
						<button @click="cancel">取消</button>
						<button @click="submit" type="primary">确定提交</button>
					</view>
				</view>
			</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import useGetGlobalProperties from '@/util/useGlobal.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	const urls = useGetGlobalProperties().$https;
	const user = uni.getStorageSync('userInfo');
	const upOption=ref( {
					textNoMore: '没有更多数据了~',
					empty: {
						use: true,
						// icon: '../../../../static/images/common/noMore.png',
						tip: '暂无相关数据'
					}
				})
	const items = ref([])
	const flagItems = ref([])
	const initFlag = ref(false) // 初始化标识
	const show = ref(false)
	const formData = ref({
		addressName:'',
		addressDetail:'',
		linkMan:'',
		linkPhone:''
	})
	const form = ref();
	const ids = ref([])
	const rules = ref(
	{
		addressDetail: {
			rules: [{
				required: true,
				errorMessage: '请输入省市区',
				trigger: 'blur'
			}]
		},
		addressName: {
			rules: [{
				required: true,
				errorMessage: '请输入详细地址',
				trigger: 'blur'
			}]
		},
		// 对name字段进行必填验证
		linkMan: {
			rules: [
				{
					required: true,
					errorMessage: '请输入姓名',
					trigger: 'blur'
				}
			]
		},
		// 对联系方式字段进行必填验证
		linkPhone: {
			rules: [{
				required: true,
				errorMessage: '请输入联系方式',
				trigger: 'blur'
			}]
		}
	})
	onLoad(() => {
		if (initFlag.value) { // 页面已经初始化，则刷新页面
			items.value = []
			mescroll.resetUpScroll()
		}
	});
	const changeSel = (e) => {
		if(!e.check || e.check == false){
			e.check = false
			ids.value.push(e.id)
		}else{
			e.check = true
			 const newArray = ids.value.filter(item => item !== e.id)
			 ids.value = newArray
		}
		e.check = !e.check
	}
	onMounted(() => {
	});
	// 下拉刷新
	const downCallback=(mescroll)=>{
		mescroll.endSuccess();
		// ids.value = []
		// if(mescroll.optUp.use){
		// 	mescroll.resetUpScroll()
		// }else{
		// 	setTimeout(()=>{
		// 		mescroll.endSuccess();
		// 	}, 500)
		// }
		// console.log(ids.value)
		// console.log(items.value)
	}
	// 上拉加载
	const upCallback=(page)=> {
		//联网加载数据
		const params = {
			pageNum: page.num,
			pageSize: page.size,
		}
		uni.request({
			url: urls + '/api/bookCar/queryPage',
			method: 'POST',
			data:params,
			success: (res) => {
				initFlag.value = true
				flagItems.value = res.data.records;
				page.endBySize(flagItems.value.length, res.data.total);
				//设置列表数据
				for (let annItem of flagItems.value) {
					items.value.push(annItem)
				}
				if (page.num == 1) {
					items.value = []; //如果是第一页需手动制空列表
					items.value = items.value.concat(flagItems.value); //追加新数据
				}
				if(ids.value.length>0){
					items.value.forEach((item)=>{
						if(ids.value.indexOf(item.id) !== -1){
							item.check = true
						}
					})
				}else{
					items.value.forEach((item)=>{
						item.check = false
					})
				}
			}
		})
	}
	// 打开弹窗
	const openForm = ()=>{
		if(ids.value.length<1){
			uni.showToast({
				title: '请至少选择一个数据',
				duration: 2000
			});
			return
		}
		show.value = true
	}
	const cancel = ()=>{
		show.value = false
	}
	// 提交
	const submit=()=>{
		form.value.validate().then(res=>{
			const params ={
				...formData.value,
				ids:ids.value
			}
			uni.request({
				url: urls + '/api/bookCar/export',
				method: 'POST',
				responseType: 'arraybuffer',
				// responseType: 'blob',
				data:params,
				success: (res) => {
					const fs = uni.getFileSystemManager(); // 获取全局唯一的文件管理器 
					// const fileName = decodeURIComponent('test.xlsx')
					//如果返回乱码需要使用decodeURIComponent转换
					// fileName =decodeURIComponent(fileName)
					fs.writeFile({ //写文件
						filePath: uni.env.USER_DATA_PATH + '/' + 'test.xlsx',
						data: res.data,  // res.data就是接口返回的文件流
						encoding: "binary", //二进制流文件必须是 binary
						success(e) {
							uni.openDocument({ // 打开文档
								filePath: uni.env.USER_DATA_PATH + '/' + 'test.xlsx', // 上面存入的文件路径
								fileType: 'xlsx', // 文件类型
								showMenu: true, // 显示右上角菜单
								success: function(res) {
									console.log("打开文件",res); 
								},
							})
						}
					})
					show.value = false
				}
			})
		}).catch(err =>{
			console.log('表单错误信息：', err);
		})
	}
</script>

<style scoped>
	.submit{
		width:100%;
		height:80rpx;
		line-height:50rpx;
		position: fixed;
		left:0;
		bottom:0;
		z-index:999;
	}
	.image-box{
		width:750rpx;
		height:400rpx;
	}
	.image-box image{
		width:100%;
		height:100%;
	}
	.image-container {
		width:100%;
		display: flex;
		padding:30rpx;
		padding-bottom:0rpx;
		box-sizing: border-box;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 5%;
	}
	
	.image-item {
		width:30%;
		height:300rpx;
		margin-bottom:40rpx;
		display:flex;
		flex-direction: column;
	}
	.text-wrapper{
		width:100%;
		height:40rpx;
		line-height:40rpx;
	}
	.bookName{
		display:inline-block;
		width:100%;
		height:40rpx;
		/* text-indent: 60rpx; */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.btn{
		display:flex;
		justify-content: space-around;
	}
	.btn button{
		width:280rpx;
		height:80rpx;
		line-height:80rpx;
	}
	.formbox{
		width:100%;
		height:100%;
		position: absolute;
		bottom:0;
		left:0;
		background:rgba(255,255,255);
		z-index:9999;
		box-sizing: border-box;
		display:flex;
		flex-direction: column;
		justify-content: center;
	}
</style>
<style>
	.uni-forms{
		width:100%;
		height:100%;
		padding:50rpx;
	}
	.uni-easyinput {
		width:75%!important;
	}
	.uv-button{
		height:80rpx!important;
		line-height:80rpx!important;
	}
</style>